﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hi嗨趣首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <style>
        /*跨webview需要手动指定位置*/

        .mui-plus header.mui-bar {
            display: none !important;
        }

        .mui-plus .mui-bar-nav ~ .mui-content {
            padding: 0 !important;
        }

        .mui-plus .plus {
            display: inline;
        }

        .plus {
            display: none;
        }

        #topPopover {
            position: absolute;
            top: 14px;
            right: 6px;
        }

            #topPopover .mui-popover-arrow {
                left: auto;
                right: 6px;
            }

        p {
            text-indent: 22px;
        }

        span.mui-icon {
            font-size: 13px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }

        .mui-popover {
            height: 180px;
        }

        .mui-content {
            padding: 10px;
        }
    </style>
</head>

<!--http://www.dcloud.io/hellomui/-->

<body>
    <!--右上角弹出菜单-->
    <div id="topPopover" class="mui-popover">
        <div class="mui-popover-arrow"></div>
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view">

                    <li class="mui-table-view-cell">
                        <a href="#">登陆</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">购物车</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">个人中心</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">退出</a>
                    </li>

                </ul>
            </div>
        </div>

    </div>

    <header class="mui-bar mui-bar-nav ">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">HiTravel</h1>
        <a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
    </header>
    <div class="mui-content">
        <ul class="mui-table-view mui-table-view-chevron " style="display:none;">
            <li id="switch" class="mui-table-view-cell">
                定时轮播
                <div class="mui-switch">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
        </ul>
        <div id="slider" class="mui-slider" style="padding-top:10px;">
            <div class="mui-slider-group mui-slider-loop">
                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="http://pic4.40017.cn/line/admin/2016/11/03/17/joI018_640x360_00.jpg">
                        <p class="mui-slider-title">
                            <span style="color:white">静静看这世界</span>
                        </p>
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="http://pic3.40017.cn/line/admin/2015/11/05/14/FuHnZU_640x360_00.jpg">
                        <p class="mui-slider-title">
                            <span style="color:white">幸福就是可以一起睡觉</span>
                        </p>
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="http://pic3.40017.cn/line/admin/2015/11/05/14/UVrvyg_640x360_00.jpg">
                        <p class="mui-slider-title">
                            <span style="color:white">想要一间这样的木屋，静静的喝咖啡</span>

                        </p>
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="http://pic3.40017.cn/line/admin/2015/10/28/17/6l9mvE_640x360_00.jpg">
                        <p class="mui-slider-title">
                            <span style="color:white">想要一间这样的木屋，静静的喝咖啡</span>

                        </p>
                    </a>
                </div>



            </div>
            <div class="mui-slider-indicator mui-text-center" style="display:none;">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>


        <div class="mui-card" style='margin-left:0px; margin-right:0px;'>
            <div class="mui-card-header">精选目的地</div>
            <div class="mui-card-content">
                <ul class="mui-table-view mui-grid-view">
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/yuantiao.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/yuantiao.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link"></a>
                <a class="mui-card-link" href='search.html'>查看更多</a>
            </div>
        </div>

        <div class="mui-card" style='margin-left:0px; margin-right:0px;'>
            <div class="mui-card-header">自然风光</div>
            <div class="mui-card-content">
                <ul class="mui-table-view mui-grid-view">
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/yuantiao.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/yuantiao.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link"></a>
                <a class="mui-card-link" href='search.html'>查看更多</a>
            </div>
        </div>

        <div class="mui-card" style='margin-left:0px; margin-right:0px;'>
            <div class="mui-card-header">主题乐园</div>
            <div class="mui-card-content">
                <ul class="mui-table-view mui-grid-view">
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/yuantiao.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/yuantiao.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link"></a>
                <a class="mui-card-link" href='search.html'>查看更多</a>
            </div>
        </div>

        <div class="mui-card" style='margin-left:0px; margin-right:0px;'>
            <div class="mui-card-header">动植物园</div>
            <div class="mui-card-content">
                <ul class="mui-table-view mui-grid-view">
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/yuantiao.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/yuantiao.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="#">
                            <img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link"></a>
                <a class="mui-card-link" href='search.html'>查看更多</a>
            </div>
        </div>




        <button type="button" class="mui-btn mui-btn-royal mui-btn-block mui-btn-outlined"><a href="search.html">更多精彩请进</a></button>
    </div>

    </div>


</body>
<script src="http://dcloud.io/hellomui/js/mui.min.js"></script>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    var slider = mui("#slider");
    document.getElementById("switch").addEventListener('toggle', function (e) {
        if (e.detail.isActive) {
            slider.slider({
                interval: 5000
            });
        } else {
            slider.slider({
                interval: 0
            });
        }
    });

    mui('body').on('shown', '.mui-popover', function (e) {
        //console.log('shown', e.detail.id);//detail为当前popover元素
    });
    mui('body').on('hidden', '.mui-popover', function (e) {
        //console.log('hidden', e.detail.id);//detail为当前popover元素
    });
</script>

</html>